<template>
  <div class="app-top">
    <div class="w-100 bf-gg" style="height:100%" />
    <div class="position-absolute h-100" style="top:0">
      <div class="h-100 app-top-top">
        <div style="height: 65.45%;top:10%" class="position-absolute w-100 flex flex-center">
          <div class="top-one">杨凌农业产业大数据</div>
          <div class="top-center">
            <div>
              <router-link :to="{ name: 'general-overview' }" active-class="c-28C2FF">综合概况</router-link>
            </div>
            <div>
              <router-link :to="{ name: 'industrial-base' }" active-class="c-28C2FF">产业基础</router-link>
            </div>
            <div>
              <router-link :to="{ name: 'industrial-evelopment' }" active-class="c-28C2FF">产业发展</router-link>
            </div>
            <div>
              <router-link :to="{ name: 'industrial-decision-making' }" active-class="c-28C2FF">产业决策</router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="children.length" class="itembox-center" style="height:21.57%;">
      <div class="flex justify-between itembox" style="width:31.25%; color:#fff;line-height:200%;">
        <div v-for="item in children" :key="item.name">
          <router-link active-class="c-28C2FF" :to="{ name: item.name }">{{ item.meta.title }}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mRouter from '@/router/modules/m-router'
import xRouter from '@/router/modules/x-router'
const arr = ['industrial-evelopment', 'industrial-decision-making', 'industrial-base', 'general-overview']
export default {
  name: 'IndexHeader',
  data() {
    return {
      children: [],
      routerName: ''
    }
  },
  computed: {
    routerPoor() {
      return [...mRouter, ...xRouter]
    }
  },
  created() {
    this.init(this.$route.name)
  },
  methods: {
    init(name) {
      if (name === this.routerName) return
      if (name === 'general-overview') {
        this.children = []
        return
      }
      const routerPoor = this.routerPoor
      if (this.children.length === 0 || !this.children.some((item) => item.name === name)) {
        let findName = ''
        if (arr.includes(name)) {
          findName = name
        } else {
          findName = this.$route.matched[0].name
        }
        this.children = routerPoor.find((item) => item.name === findName).children
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-top {
  position: relative;
  width: 100%;
  height: 10.2%;
}
.bf-gg {
  background: url(~@/assets/img/bg-img.png) no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
}
.app-top-top {
  background: url(~@/assets/img/top-img/top-bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.c-28C2FF {
  color: #28c2ff !important;
}
.itembox {
  margin: 0 auto;
  margin-top: -15px;
  width: 824px;
  height: 40px;
  background: linear-gradient(90deg, rgba(36, 58, 86, 0) 0%, rgba(21, 82, 119, 1) 50%, rgba(36, 58, 86, 0) 100%);
  border: 2px solid;
  border-image: linear-gradient(277deg, rgba(43, 114, 158, 0.15), rgba(65, 139, 184, 1), rgba(21, 82, 119, 0.13)) 2 2;
}
.top-one {
  position: absolute;
  left: 1%;
  width: 28%;
  font-family: myfont;
  color: rgba(255, 255, 255, 1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(104, 202, 255, 1) 100%);
  color: transparent;
  -webkit-background-clip: text;
  font-size: 32px;
  line-height: 42px;
}
.top-center {
  height: 100%;
  width: 31.7%;
  background: url(~@/assets/img/top-img/top-center.png) no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: space-around;
  padding-top: 0.7%;
  div {
    font-size: 22px;
    font-family: myfont;
    color: rgba(238, 249, 255, 1);
    line-height: 29px;
    text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
    cursor: pointer;
  }
  .font-active {
    text-shadow: 0px 1px 12px rgba(6, 80, 184, 0.41);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(60, 181, 255, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.flex-center {
  justify-content: center;
}
.itembox-center {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
}
</style>
